<template>
  <div class="container">
    <card title="存活分析">
      <div class="search-head">
        <div class="block">
          <span class="demonstration">APP：</span>
          <el-select v-model="source_app" filterable placeholder="请选择">
            <el-option label="全部APP" value=""></el-option>
            <el-option
              v-for="item in apps"
              :key="item.source_app"
              :label="item.app_name"
              :value="item.source_app">
            </el-option>
          </el-select>
        </div>
        <div class="block">
          <span class="demonstration">时间：</span>
          <el-date-picker
            v-model="time"
            type="date"
            :clearable="false"
            :picker-options="pickerOptions"
            placeholder="选择日期范围">
          </el-date-picker>
        </div>
      </div>
    </card>
    <card :title="title">
      <div class="asm-table">
        <div class="asm-tr">
          <div class="asm-th">序号</div>
          <div class="asm-th">IDFA</div>
          <div class="asm-th">申请的产品</div>
        </div>
        <div class="asm-tr" v-if="isLoading">
          <loading></loading>
        </div>
        <div class="asm-tr asm-no-data" v-else-if="data.length < 1"></div>
        <div class="asm-tr" v-else v-for="(item, index) in data" :key="index">
          <div class="asm-td">{{(currentPage - 1) * pageSize  + index + 1}}</div>
          <div class="asm-td">{{item.idfa}}</div>
          <div class="asm-td tags">
            <span class="tag is-primary" v-for="id in item.ad_ids" :key="id">
              {{ads[id]?ads[id].title:''}}
            </span>
          </div>
        </div>
        <pagination
          v-show="total > 0 && !isLoading && result.total_elements"
          :index="currentPage"
          :count="total"
          :loading="isLoading"
          @change="handleCurrentChange">
        </pagination>
      </div>
    </card>
  </div>
</template>
<script>
import { Pagination } from '@/components/Common'
export default {
  name: 'live',
  components: {
    Pagination
  },
  created () {
    this.getAds()
    this.$api.get('assistant/opening').then(req => {
      this.apps = req || []
      this.getData()
    })
  },
  computed: {
    time: {
      get () {
        return this.date
      },
      set (val) {
        this.date = this.$dateFormat('yyyy-MM-dd', new Date(val))
      }
    },
    title () {
      let name = ''
      if (this.source_app === '') {
        name = '全部产品'
      } else {
        let app = this.apps.find(item => item.source_app === this.source_app)
        name = app.app_name
      }
      return `${this.date} ${name} 用户统计 ${this.result.total_elements ? this.result.total_elements : ''}`
    },
    data () {
      return this.result.content || []
    },
    total () {
      return this.result.total_pages || 1
    }
  },
  data () {
    let date = this.$dateFormat('yyyy-MM-dd', new Date())
    return {
      isLoading: false,
      currentPage: 1,
      pageSize: 50,
      ads: {},
      result: {},
      apps: [],
      source_app: '',
      date,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() >= Date.now()
        }
      }
    }
  },
  watch: {
    date () {
      this.getData()
    },
    source_app () {
      this.getData()
    }
  },
  methods: {
    getAds () {
      this.$api.get('ads/map_ad_title').then(res => {
        let ads = {}
        for (let item of res) {
          ads[item.app_id] = item
        }
        this.ads = ads
      })
    },
    handleCurrentChange (index) {
      this.currentPage = index
      this.getData()
    },
    getData () {
      let param = {
        date: this.date,
        page: this.currentPage - 1,
        size: this.pageSize
      }
      if (this.source_app !== '') {
        param.source_app = this.source_app
      }
      this.isLoading = true
      this.$api.get('action_statistics/apply', param).then(res => {
        this.result = res || {}
        this.isLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/scss/table.scss';
.search-head{
  display: flex;
  padding: 10px 20px;
  & > div:not(:last-child) {
    margin-right: 10px;
  }
}
.asm-td.tags{
  display: flex;
  flex-direction: row !important;
  justify-content: flex-start !important;
  flex-wrap: wrap;
  .tag:not(:last-child) {
    margin-right: 5px;
  }
}
</style>
